<script setup>
import {DbTypes} from "../../js/common.js";
const emit = defineEmits(['close','save'])
// 定义 props
const props = defineProps({
  currentCDC: {
    type: Object,
    required: true
  },

});

async function deleteParamsHandle(item, itemIndex){
  currentCDC.value.params.splice(itemIndex, 1);
}

async function addParamsHandle() {
  currentCDC.value.params.push({
    key:"",
    value:""
  })
}
</script>

<template>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card" style="width:960px">
      <header class="modal-card-head">
        <p class="modal-card-title">CDC任务设置</p>
        <button class="delete" aria-label="close" @click="emit('close')"></button>
      </header>
      <section class="modal-card-body">
        <!--索引设置 Begin-->
        <div v-if="currentCDC">
          <div class="field">
            <label class="label">名称</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="" v-model="currentCDC.name">
            </div>
            <span class="help is-success">名称只能是英文</span>
          </div>

          <div class="field">
            <label class="label">数据库类型</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <select v-model="currentCDC.type">
                  <option>选择数据库</option>
                  <option v-for="(value,key) in DbTypes" :value="key">{{ key }}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field">
            <label class="label">服务器(Host)</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder="" v-model="currentCDC.host">
            </div>
          </div>
          <div class="field">
            <label class="label">端口</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentCDC.port">
            </div>
          </div>
          <div class="field">
            <label class="label">用户名</label>
            <div class="control is-expanded">
              <input class="input is-link" type="text" placeholder="*" v-model="currentCDC.username">
            </div>
          </div>
          <div class="field">
            <label class="label">密码</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentCDC.password">
            </div>
          </div>
          <div class="field">
            <label class="label">过滤器</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="" v-model="currentCDC.filter">
            </div>
            <span class="help is-success">例如：db1.t1,db1.t2,db2.*,db3。。多个过滤器用逗号分隔</span>
          </div>
        </div>
        <!--自定义params Begin-->
        <div v-if="currentCDC.params">
          <table class="table is-fullwidth">
            <thead>
            <tr>
              <th>名称</th>
              <th>值</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,itemIndex) in currentCDC.params" :key="itemIndex">
              <td>
                <input class="input is-link" type="text" placeholder="key" v-model="item.key">
              </td>
              <td>
                <input class="input is-link" type="text" placeholder="value" v-model="item.value">
              </td>
              <td>
                <button class="button is-link" @click="deleteParamsHandle(item,itemIndex)">删除</button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <!--自定义params End-->
        <!--索引设置 End-->
      </section>
      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
        <div class="buttons">
          <button class="button is-link" @click="addParamsHandle">增加参数</button>
          <button class="button is-link" @click="emit('save')">保存</button>
        </div>
      </footer>
    </div>
  </div>
</template>

<style scoped>

</style>